<template>
  <div class="common-detailss listInner">
    <customDetailsTopbar flag :title="`考核记录详情页`" @back="back" />
    <div class="infoWarps listInner">
      <div class="px-1">
        <div class="py-1 px-1 bg-white d-scroll listInner">
          <custom-title :is-line="true" title="专家信息" />
          <div v-for="(item,index) in descList.filter(v=>{return v.label!=='年份'})" :key="index">
            <template v-if="item.fieldName !== 'expertAttributeList'">
              <custom-details-item one-color :label="item.label" :value="item.value" :icon="item.icon" />
            </template>
            <template v-else>
              <custom-details-item one-color :label="item.label" :value="item.value.map(i => i['expertattributename']).join(',')" :icon="item.icon" />
            </template>
          </div>
          <custom-title :is-line="true" title="考核年份" />
          <div v-for="(item) in descList" :key="item.fieldName">
            <template v-if="item.fieldName === 'examYear'">
              <custom-details-item one-color :label="item.label" :value="item.value" :icon="item.icon" />
            </template>
          </div>
          <custom-title :is-line="true" title="考核分数" />
          <div class="common_list" style="padding: 0">
            <template v-if="listData && listData.length>0">
              <div v-for="(item, index) in listData" :key="item.scoreId" class="list_item">
                <div class="content_area">
                  <div class="number_order">{{ index + 1 }}</div>
                  <div class="right_content">
                    <div class="content_title" style="max-width: 100%">{{ item['indexName'] }}</div>
                    <ul>
                      <li v-for="(it,ind) in fieldList" :key="index + '' + ind">
                        <i class="iconfont" :class="`c-text-color${ind + 1}`" v-html="it.icon" />
                        <div class="label">{{ it.label }}：</div>
                        <div v-if="it.field !== 'attachName'" class="value">
                          <span v-if="it.field === 'reduceScore' || it.field === 'score'">{{ item[it.field] + '分' }}</span>
                          <span v-else>{{ item[it.field] }}</span>
                        </div>
                        <div v-else class="value">
                          <el-link type="primary" class="desContent" @click="handleDownLoad(item.attachUuid)">
                            {{ item['attachName'] }}
                          </el-link>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </template>
            <el-empty v-else />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CustomDetailsTopbar from '@/components/globals/custom-details-topbar.vue'
import { getExpertExamInfo } from '@/api/commonPage/personnel'
import CustomTitle from '@/components/globals/custom-title.vue'
import CustomDetailsItem from '@/components/globals/custom-details-item.vue'
import commonList from '@/assets/mixin/commonList'

export default {
  name: 'AppraisalRecordsDetails',
  inject: ['layout'],
  components: { CustomDetailsItem, CustomTitle, CustomDetailsTopbar },
  mixins: [commonList],
  data() {
    return {
      examld: '',
      active: '',
      id: '',
      current: '',
      type: '',
      listData: [],
      descList: [
        { icon: '&#xe790;', label: '姓名', value: '', fieldName: 'userName', type: 'all' },
        { icon: '&#xe87e;', label: '属性类别', value: '', fieldName: 'expertAttributeList', type: 'all' },
        { icon: '&#xe629;', label: '专业类别', value: '', fieldName: 'professionType', type: 'all' },
        { icon: '&#xe62c;', label: '工作单位', value: '', fieldName: 'workUnit', type: 'all' },
        { icon: '&#xe790;', label: '年份', value: '', fieldName: 'examYear', type: 'all' }
      ],
      fieldList: [
        { icon: '&#xe6b6;', field: 'indexName', label: '考核指标' },
        { icon: '&#xe69e;', field: 'examStandard', label: '考核标准' },
        { icon: '&#xe677;', field: 'reduceScore', label: '扣分' },
        { icon: '&#xe677;', field: 'reduceScoreMsg', label: '扣分原因' },
        { icon: '&#xe677;', field: 'score', label: '得分' },
        { icon: '&#xe677;', field: 'plateStatistics', label: '平台统计情况（供参考）' }
      ]
    }
  },
  mounted() {
  },
  created() {
    this.initAssignmentHandler()
    this.getDataList()
  },
  methods: {
    initAssignmentHandler() {
      const { id, current, active, type, examld } = this.$route.query
      this.examld = examld || ''
      this.id = id || ''
      this.current = current || ''
      this.active = active || ''
      this.type = type || ''
    },
    async getDataList() {
      try {
        this.layout.showLoading()
        const { data, status } = await getExpertExamInfo({ examId: Number(this.examld) })
        if (status === 0) {
          // 基本信息
          this.descList.forEach(v => {
            v.value = data[v.fieldName] ? data[v.fieldName] : v.value
          })
          this.listData = data['examSubList']
        }
        this.layout.hideLoading()
      } catch (e) {
        this.layout.hideLoading()
        console.log(e)
      }
    },
    back() {
      this.$router.push({
        path: '/staging/personnelDetails',
        query: {
          id: this.id,
          type: this.type,
          current: this.current,
          active: this.active
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.common-detailss {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .infoWarps {
    flex: 1;
    overflow: auto;
  }
}
</style>
